import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Button,
  Modal,
  InputNumber,
  Divider,
  Menu,
  Icon,
  Popconfirm,
  Dropdown,
} from 'antd';
import InputColor from 'react-input-color';
import TableList from '@/components/TableList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from '../search.less';
const Option = Select.Option;
const FormItem = Form.Item;

const getValue = obj =>
  Object.keys(obj)
    .map(id => obj[id])
    .join(',');
const formItemLayout = {
  labelCol: {
    sm: { span: 6 },
  },
  wrapperCol: {
    sm: { span: 18 },
  },
};

const colorStyle = {
    width: '100%',
    height: '30px',
    padding: '0',
    border: '1px solid #d9d9d9',
    borderRadius: '4px',
    overflow: 'hidden',
    marginTop: '2px',
}
const CreateForm = Form.create()(props => {

  const {
    modalVisible,
    form,
    handleAdd,
    handleModalVisible ,
    fileTypeData,
    fontData,
    fontSizeData,
    preview,
  } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleAdd(fieldsValue);
    });
  };
  const willLook = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const params = {
        waterType: 1,
        fileSuffix: fieldsValue.fileSuffix,
        font: fieldsValue.font,
        fontSize: fieldsValue.fontSize,
        color: fieldsValue.color.hex,
        tilt: fieldsValue.tilt,
        transparency: fieldsValue.transparency,
        rowNums: fieldsValue.rowNums,
        colNums: fieldsValue.colNums,
        picWidth: fieldsValue.picWidth,
        picHeight: fieldsValue.picHeight,
        waterContent: fieldsValue.waterContent,
      }
      preview(params);
    });
  }
  const handleValidator = (rule, val, callback) => {
    if (!val) {
        callback();
    }
    if (form.getFieldValue('waterContent').length > 2) {
        callback('最多选择两个水印内容');
    }
    callback();
  }

  return (
    <Modal
      destroyOnClose
      width={800}
      title="新增水印配置"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => handleModalVisible()}
      maskClosable={false}
    >
      <Form>
        <Row gutter={16}>
          <Col md={12}>
            <FormItem {...formItemLayout} label="文件类型">
              {form.getFieldDecorator('fileSuffix', {
                rules: [{ required: true,message:'请选择文件类型'}],initialValue:"4"
              })(<Select placeholder="请选择">
                {
                  fileTypeData && fileTypeData.map((item,index) => {
                    return (<Option  key={index} value={item.value}>{item.name}</Option>)
                  })
                }
              </Select>)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="字体">
              {form.getFieldDecorator('font', {
                rules: [{ required: true,message:'请选择字体'}],initialValue: '宋体'
              })(<Select>
                {
                  fontData && fontData.map((item,index) => {
                    return (<Option  key={index} value={item.value}>{item.name}</Option>)
                  })
                }
              </Select>)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="字号">
              {form.getFieldDecorator('fontSize', {
                rules: [{ required: true,message:'请选择字号'}],initialValue: '20'
              })(<Select>
                {
                  fontSizeData && fontSizeData.map((item,index) => {
                    return (<Option  key={index} value={item.value}>{item.name}</Option>)
                  })
                }
              </Select>)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="颜色">
              {form.getFieldDecorator('color', {
                rules: [{ required: true,message:'请选择颜色'}],
              })(<InputColor
                  style={colorStyle}
                  initialHexColor="#333"
                  placement="right"
                />)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="倾斜度">
              {form.getFieldDecorator('tilt', {
                rules: [{ required: true,message:'倾斜度不能为空'}], initialValue: '45'
              })(<InputNumber min={0} max={90} style={{ width: '100%' }} placeholder="0-90"/>)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="透明度">
              {form.getFieldDecorator('transparency', {
                rules: [{ required: true,message:'透明度不能为空'}],initialValue: '0.3'
              })(<InputNumber
                style={{ width: '100%' }} min={0.3} max={0.8} step={0.1} placeholder="0.3-0.8"
              />)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="行数">
              {form.getFieldDecorator('rowNums', {
                rules: [{ required: true,message:'行数不能为空'}], initialValue: '3'
              })(<InputNumber min={1} max={10} style={{ width: '100%' }} placeholder="1-10"/>)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="列数">
              {form.getFieldDecorator('colNums', {
                rules: [{ required: true,message:'列数不能为空'}], initialValue: '3'
              })(<InputNumber min={1} max={10} style={{ width: '100%' }} placeholder="1-10" />)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="底图宽度">
              {form.getFieldDecorator('picWidth')(<InputNumber min={0} max={10000} style={{ width: '100%' }} step={1} placeholder="0" />)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="底图高度">
              {form.getFieldDecorator('picHeight')(<InputNumber min={0} max={10000} style={{ width: '100%' }} step={1} placeholder="0" />)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="水印内容">
              {form.getFieldDecorator('waterContent', {
                rules: [{ required: true,message:'请选择水印内容'},{
                    validator: handleValidator} ],initialValue: 1
              })(<Select placeholder="请选择" mode="multiple">
                <Option value={0}>用户名</Option>
                <Option value={1}>日期</Option>
                <Option value={2}>MAC地址</Option>
                <Option value={3}>IP地址</Option>
              </Select>)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="预览">
              <Button type="primary" size="small" onClick={willLook}>点击查看</Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
});

@Form.create()
class UpdateForm extends PureComponent {
  static defaultProps = {
    handleUpdate: () => {},
    handleUpdateModalVisible: () => {},
    values: {},
  };

  constructor(props) {
    super(props);
    this.state = {
      formVals: {
        waterType: 1,
        fileSuffix: props.values.fileSuffix,
        font: props.values.font,
        fontSize: props.values.fontSize,
        color: props.values.color,
        tilt: props.values.tilt,
        rowNums: props.values.rowNums,
        colNums: props.values.colNums,
        picWidth: props.values.picWidth,
        picHeight: props.values.picHeight,
        waterContent: props.values.waterContent.split(','),
        transparency: props.values.transparency,
        id: props.values.id,
      },
    };
  }

  //编辑，确定提交
  handleCheck = checkBtn => {
    const { form, handleUpdate } = this.props;
    const { formVals: oldValue } = this.state;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const formVals = { ...oldValue, ...fieldsValue };
      handleUpdate(formVals)
      // this.setState(
      //   {
      //     formVals,
      //   },
      //   () => {
      //     handleUpdate(formVals);
      //   }
      // );
    });
  };
  renderFooter = checkBtn => {
    const { handleUpdateModalVisible, values } = this.props;
    return [
      <Button key="cancel" onClick={() => handleUpdateModalVisible(false, values)}>
        取消
      </Button>,
      <Button key="forward" type="primary" onClick={() => this.handleCheck(checkBtn)}>
        确定
      </Button>,
    ];
  };

 willLook = () => {
    const { form, preview } = this.props;
    form.validateFields((err, fieldsValue) => {
      const params = {
        waterType: 1,
        fileSuffix: fieldsValue.fileSuffix,
        font: fieldsValue.font,
        fontSize: fieldsValue.fontSize,
        color: fieldsValue.color.hex,
        tilt: fieldsValue.tilt,
        transparency: fieldsValue.transparency,
        rowNums: fieldsValue.rowNums,
        colNums: fieldsValue.colNums,
        picWidth: fieldsValue.picWidth,
        picHeight: fieldsValue.picHeight,
        waterContent: fieldsValue.waterContent,
      }
      preview(params);
    });
  }
  handleValidator = (rule, val, callback) => {
    const { form } = this.props;
    if (!val) {
        callback();
    }
    if (form.getFieldValue('waterContent').length > 2) {
        callback('最多选择两个水印内容');
    }
    callback();
  }

  render() {
    const { updateModalVisible, handleUpdateModalVisible, values ,form,fileTypeData,fontData,fontSizeData
    } = this.props;
    const { checkBtn, formVals } = this.state;

    return (
      <Modal
        width={800}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title="编辑水印配置"
        visible={updateModalVisible}
        footer={this.renderFooter(checkBtn)}
        onCancel={() => handleUpdateModalVisible(false, values)}
        afterClose={() => handleUpdateModalVisible()}
        maskClosable={false}
      >

        <Form>
          <Row gutter={16}>
            <Col md={12}>
              <FormItem id="fileSuffix" {...formItemLayout} label="文件类型">
                {form.getFieldDecorator('fileSuffix', {
                  rules: [{ required: true,message:'请选择文件类型'}],initialValue: formVals.fileSuffix
                })(<Select placeholder="请选择">
                  {
                    fileTypeData && fileTypeData.map((item,index) => {
                      return (<Option  key={index} value={item.value}>{item.name}</Option>)
                    })
                  }
                </Select>)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem id="font" {...formItemLayout} label="字体">
                {form.getFieldDecorator('font', {
                  rules: [{ required: true,message:'请选择字体'}],initialValue: formVals.font
                })(<Select>
                  {
                    fontData && fontData.map((item,index) => {
                      return (<Option  key={index} value={item.value}>{item.name}</Option>)
                    })
                  }
                </Select>)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem id="fontSize" {...formItemLayout} label="字号">
                {form.getFieldDecorator('fontSize', {
                  rules: [{ required: true,message:'请选择字号'}],initialValue: formVals.fontSize
                })(<Select>
                  {
                    fontSizeData && fontSizeData.map((item,index) => {
                      return (<Option  key={index} value={item.value}>{item.name}</Option>)
                    })
                  }
                </Select>)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem id="color" {...formItemLayout} label="颜色">
                {form.getFieldDecorator('color', {
                  rules: [{ required: true,message:'请选择颜色'}]
                })(<InputColor
                    style={colorStyle}
                    initialHexColor={formVals.color}
                    placement="right"
                  />)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem id="tilt" {...formItemLayout} label="倾斜度">
                {form.getFieldDecorator('tilt', {
                  rules: [{ required: true,message:'倾斜度不能为空'}],initialValue: formVals.tilt
                })(<InputNumber min={0} max={90} style={{ width: '100%' }} placeholder="0-90"/>)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem id="transparency" {...formItemLayout} label="透明度">
                {form.getFieldDecorator('transparency', {
                  rules: [{ required: true,message:'透明度不能为空'}],initialValue: formVals.transparency
                })(<InputNumber
                  style={{ width: '100%' }} min={0.3} max={0.8} step={0.1} placeholder="0.3-0.8"
                />)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem id="rowNums" {...formItemLayout} label="行数">
                {form.getFieldDecorator('rowNums', {
                  rules: [{ required: true,message:'行数不能为空'}],initialValue: formVals.rowNums
                })(<InputNumber min={1} max={10} style={{ width: '100%' }} placeholder="1-10" />)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem id="colNums" {...formItemLayout} label="列数">
                {form.getFieldDecorator('colNums', {
                  rules: [{ required: true,message:'列数不能为空'}],initialValue: formVals.colNums
                })(<InputNumber min={1} max={10} style={{ width: '100%' }} placeholder="1-10" />)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem id="picWidth" {...formItemLayout} label="底图宽度">
                {form.getFieldDecorator('picWidth',{initialValue: formVals.picWidth
                })(<InputNumber min={0} max={10000} style={{ width: '100%' }} step={1} placeholder="0" />)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem id="picHeight" {...formItemLayout} label="底图高度">
                {form.getFieldDecorator('picHeight', {initialValue: formVals.picHeight
                })(<InputNumber min={0} max={10000} style={{ width: '100%' }} step={1} placeholder="0" />)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem id="waterContent" {...formItemLayout} label="水印内容">
                {form.getFieldDecorator('waterContent', {
                  rules: [{ required: true,message:'请选择水印内容'},{
                    validator: this.handleValidator} ],initialValue: formVals.waterContent
                })(<Select placeholder="请选择" mode="multiple">
                  <Option value="0">用户名</Option>
                  <Option value="1">日期</Option>
                  <Option value="2">MAC地址</Option>
                  <Option value="3">IP地址</Option>
                </Select>)}
              </FormItem>
            </Col>

            <Col md={12}>
              <FormItem {...formItemLayout} label="预览">
               <Button type="primary" size="small" onClick={this.willLook}>点击查看</Button>
              </FormItem>
            </Col>

          </Row>
        </Form>
      </Modal>
    );
  }
}

/* eslint react/no-multi-comp:0 */
@connect(({ plainText, loading }) => ({
  plainText,
  loading: loading.models.plainText,
}))
@Form.create()
class plainText extends PureComponent {
  state = {
    modalVisible: false,
    updateModalVisible: false,
    expandForm: false,
    selectedRows: [],
    formValues: {},
    stepFormValues: {},
    //详情
    detailVisible: false,
    detailsData: {},
    // 预览
    imgVisible: false,
    imgData: '',
  };


  columns = [
    {
      title: '文件类型',
      dataIndex: 'fileSuffixName',
    },
    {
      title: '字体',
      dataIndex: 'font',

    },
    {
      title: '字号',
      dataIndex: 'fontSize',
    },
    {
      title: '颜色',
      render: (text) => (
        <Fragment>
          <span style={{display:'block',background:text.color,width:'40px',height:'20px'}}></span>
        </Fragment>
      ),

    },


    {
      title: '倾斜度',
      dataIndex: 'tilt',

    },
    {
      title: '行数',
      dataIndex: 'rowNums',

    },
    {
      title: '列数',
      dataIndex: 'colNums',
    },
    {
      title: '操作',
      render: (text, record) => (
        <Fragment>
          <a onClick={() => this.detailHandelVisible(true,text)}>详情</a>
          <Divider type="vertical" />
          <Dropdown
            overlay={
              <Menu>
                <Menu.Item onClick={() => this.handleUpdateModalVisible(true, record)}>编辑</Menu.Item>
                <Menu.Item onClick={() => this.deleteData(text.id)}>删除</Menu.Item>
              </Menu>
            }
          >
            <a>更多 <Icon type="down"/></a>
          </Dropdown>
         {/* <a onClick={() => this.handleUpdateModalVisible(true, record)}>编辑</a>
          <Divider type="vertical" />
          <a onClick={() => this.handleThisRowDelete(record)}>删除</a>*/}
        </Fragment>
      ),
    },
  ];


  componentDidMount() {
    const { dispatch} = this.props;
    dispatch({
      type: 'plainText/queryList',
      payload: {
        waterType: '1',
      },
    });
    this.fileMothodType({dataDictTypeCode: 'watermarkfiletype'},1);
    this.fileMothodType({dataDictTypeCode: 'fontFamily'},2);
    this.fileMothodType({dataDictTypeCode: 'fontSize'},3);
  }

  imgHandelVisible = (flag) => {
    this.setState({
      imgVisible: !!flag,
    });
  };

  // 水印预览
  preview(params) {
    const { dispatch} = this.props;
    dispatch({
      type: 'plainText/preview',
      payload: params,
      callback: (res) => {
        if(res.result == "ok") {
          this.setState({
            imgData: res.data,
          })
          this.imgHandelVisible(true);
        }else {
          Modal.error({title: '操作失败',content: res.msg});
        }
      }
    });
  }

  fileMothodType(parmas,flag) {
    const { dispatch} = this.props;
      dispatch({
      type: 'plainText/byTypeCode',
      payload: parmas,
      callback: (res) => {
        if(res.result == "ok") {
          if(flag == 1){
            this.setState({
              fileTypeData: res.data.dataList,
            })
          }
          if(flag == 2){
            this.setState({
              fontData: res.data.dataList,
            })
          }
          if(flag == 3){
            this.setState({
              fontSizeData: res.data.dataList,
            })
          }
        }else {
          Modal.error({title: '操作失败',content: res.msg});
        }
      }
    });
  }

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;

    const params = {
      pageNum: pagination.current-1,
      pageSize: pagination.pageSize,
      waterType: '1',
      ...formValues,
    };
    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }

    dispatch({
      type: 'plainText/queryList',
      payload: params,
    });
  };

  deleteData = (id) => {
    Modal.confirm({
      title: '删除',
      content: '您确定要删除以下数据吗？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => this.handleThisRowDelete(id),
    });
  };

  handleThisRowDelete = (id) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'plainText/remove',
      payload: {id},
      callback: (res) => {
        if(res.result == "ok") {
          Modal.success({title: res.msg});
          dispatch({
            type: 'plainText/queryList',
            payload: {waterType: '1',},
          });
          this.setState({selectedRows: []})
        }else {
          Modal.error({title: '操作失败',content: res.msg});
        }
      },//callback
    });
  }

//批量删除
/*  handleSelectDelete = () => {
    const { dispatch } = this.props;
    const { selectedRows } = this.state;
    if (selectedRows.length === 0) return;
    dispatch({
      type: 'plainText/remove',
      payload: {
        id: selectedRows.map(row => row.id),
      },
      callback: (res) => {
        this.setState({
          selectedRows: [],
        });

        if(res.result == "ok") {
          Modal.success({title: res.msg});
          dispatch({
            type: 'plainText/queryList',
            payload: {waterType: '1',},
          });
        }else {
          Modal.error({title: '操作失败',content: res.msg});
        }
      },
    });
  };*/


  batchDelete = (rows=[]) => {
    const ids = rows.map((item) => {
      return item.id;
    }).join(",");
    this.deleteData(ids); //批量删除
  };


  handleSelectRows = rows => {
    this.setState({
      selectedRows: rows,
    });
  };

  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  handleUpdateModalVisible = (flag, record) => {
    this.setState({
      updateModalVisible: !!flag,
      stepFormValues: record || {},
    });
  };

  detailHandelVisible = (flag,text) => {
    this.setState({
      detailVisible: !!flag,
      detailsData: text,
    });
  };

  //新增
  handleAdd = fields => {
    const { dispatch } = this.props;
    dispatch({
      type: 'plainText/add',
      payload: {
        waterType: 1,
        fileSuffix: fields.fileSuffix,
        font: fields.font,
        fontSize: fields.fontSize,
        color: fields.color.hex,
        tilt: fields.tilt,
        transparency: fields.transparency,
        rowNums: fields.rowNums,
        colNums: fields.colNums,
        picWidth: fields.picWidth||0,
        picHeight: fields.picHeight||0,
        waterContent: fields.waterContent,
      },

      callback: (res) => {
        if(res.result == "ok") {
          Modal.success({title: res.msg});
          dispatch({
            type: 'plainText/queryList',
            payload: {waterType: '1',},
          });
        }else {
          Modal.error({title: '操作失败',content: res.msg});
        }
      },//callback
    });
    this.handleModalVisible();
  };

  //编辑
  handleUpdate = fields => {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    dispatch({
      type: 'plainText/update',
      payload: {
        waterType: 1,
        fileSuffix: fields.fileSuffix,
        font: fields.font,
        fontSize: fields.fontSize,
        color: fields.color.hex,
        tilt: fields.tilt,
        rowNums: fields.rowNums,
        colNums: fields.colNums,
        picWidth: fields.picWidth||0,
        picHeight: fields.picHeight||0,
        waterContent: fields.waterContent,
        transparency: fields.transparency,
        id: fields.id,
      },
      callback: (res) => {
        if(res.result == "ok") {
          Modal.success({title: res.msg});
          dispatch({
            type: 'plainText/queryList',
            payload: {waterType: '1',},
          });
        }else {
          Modal.error({title: '操作失败',content: res.msg});
        }
      },
    });

    this.handleUpdateModalVisible();
  };

  render() {
    const {
      plainText: { data},
      loading,
    } = this.props;
    const { selectedRows, modalVisible, updateModalVisible, stepFormValues,detailVisible, detailsData, fileTypeData,fontData,fontSizeData,imgVisible, imgData } = this.state;

    const parentMethods = {
      handleAdd: this.handleAdd,
      handleModalVisible: this.handleModalVisible,
      preview: this.preview.bind(this),
    };
    const updateMethods = {
      handleUpdateModalVisible: this.handleUpdateModalVisible,
      handleUpdate: this.handleUpdate,
      preview: this.preview.bind(this),
    };
    const detailsMethods = {
      detailHandelVisible: this.detailHandelVisible,
      preview: this.preview.bind(this),
    };
    const imgMethods = {
      imgHandelVisible: this.imgHandelVisible,
    };

    return (

        <Card bordered={false}>
          <CreateForm {...parentMethods} modalVisible={modalVisible} fileTypeData={fileTypeData} fontData={fontData} fontSizeData={fontSizeData} />
          <div className={styles.tableList}>
            <div className={styles.tableListOperator}>
              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
                新增
              </Button>
              {selectedRows.length > 0 && (
                <span>
                  <Button onClick={() => this.batchDelete(selectedRows)}>批量删除</Button>
                </span>
              )}
            </div>
            <TableList
              className={styles.tdPadding}
              selectedRows={selectedRows}
              loading={loading}
              data={data}
              columns={this.columns}
              onSelectRow={this.handleSelectRows}
              onChange={this.handleStandardTableChange}
              rowKey={record => record.id}
            />
          </div>
          {stepFormValues && Object.keys(stepFormValues).length ? (
            <UpdateForm
              {...updateMethods}
              updateModalVisible={updateModalVisible}
              values={stepFormValues}
              fileTypeData={fileTypeData}
              fontData={fontData}
              fontSizeData={fontSizeData}
            />
          ) : null}

          {detailsData&&detailsData.id?(
            <Details {...detailsMethods} detailVisible={detailVisible} detailsData={detailsData} />
          ):null}

          {imgData?(
          <ImgLook {...imgMethods} imgData={imgData} imgVisible={imgVisible}/>
          ):null}
        </Card>

    );
  }
}

class Details extends PureComponent {
    constructor(props) {
      super(props);
    }

   willLook = () => {

    const { form, preview, detailsData } = this.props;

    const params = {
      waterType: 1,
      fileSuffix: detailsData.fileSuffix,
      font: detailsData.font,
      fontSize: detailsData.fontSize,
      color: detailsData.color,
      tilt: detailsData.tilt,
      transparency: detailsData.transparency,
      rowNums: detailsData.rowNums,
      colNums: detailsData.colNums,
      picWidth: detailsData.picWidth,
      picHeight: detailsData.picHeight,
      waterContent: detailsData.waterContent,
    }
    preview(params);

  }
  render() {
    const { detailVisible, detailHandelVisible,detailsData } = this.props;
    const waterContentArr = ['用户名 ','日期','MAC地址','地址'];
    const waterContent = detailsData&&detailsData.waterContent.split(",");
    return (
      <Modal
        destroyOnClose
        width={800}
        title="查看详情"
        visible={detailVisible}
        onCancel={() => detailHandelVisible(false)}
        footer={[
          <Button key="back" type="primary" onClick={() => detailHandelVisible()}>返回</Button>
        ]}
        className={styles.viewMore}
      >
        <Row>
          <Col md={12}>
            <FormItem {...formItemLayout} label="文件类型">
              {detailsData.fileSuffixName}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="字体">
              {detailsData.font}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="字号">
              {detailsData.fontSize}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="颜色">
                <span style={{color:detailsData.color}} className="ant-form-text">{detailsData.color}</span>
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="倾斜度">
              {detailsData.tilt}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="透明度">
              {detailsData.transparency}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="行数">
              {detailsData.rowNums}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="列数">
              {detailsData.colNums}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="底图宽度">
              {detailsData.picWidth}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="底图高度">
              {detailsData.picHeight}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="水印内容">
              {
                waterContent.map((v) => {
                  return waterContentArr[v]
                }).join("，")
              }
            </FormItem>
          </Col>

          <Col md={12}>
              <FormItem {...formItemLayout} label="预览">
               <Button type="primary" size="small" onClick={this.willLook}>点击查看</Button>
              </FormItem>
          </Col>

        </Row>
      </Modal>
    );
  }
}


class ImgLook extends PureComponent {
  render() {
    const { imgVisible, imgHandelVisible,imgData } = this.props;
    return (
      <Modal
        zIndex={1002}
        destroyOnClose
        width={800}
        title="预览"
        visible={imgVisible}
        onCancel={() => imgHandelVisible(false)}
        footer={[
          <Button key="back" type="primary" onClick={() => imgHandelVisible(false)}>返回</Button>
        ]}
      >
        <img src={imgData} />

      </Modal>
    );
  }
}


export default plainText;
